React useRef: Bemästra mönster för lagring av muterbara värden

useRef är en kraftfull hook i React som erbjuder ett sätt att bevara värden mellan renderingar utan att orsaka omrenderingar när dessa värden ändras. Den förknippas ofta med direkt åtkomst till DOM-element, men dess kapacitet sträcker sig långt bortom det. Denna omfattande guide kommer att fördjupa sig i de olika användningsfallen för useRef, vilket ger dig möjlighet att skriva mer effektiv och underhållbar React-kod.

Förstå useRef: Mer än bara DOM-åtkomst

I grunden returnerar useRef ett muterbart ref-objekt vars .current-egenskap initieras med det angivna argumentet (initialValue). Det returnerade objektet kommer att bestå under hela komponentens livscykel. Avgörande är att en ändring av .current-egenskapen inte utlöser en omrendering. Detta är den viktigaste skillnaden mellan useRef och useState.

Även om åtkomst till DOM-element är ett vanligt användningsfall, utmärker sig useRef för att hantera alla muterbara värden som inte behöver orsaka en omrendering när de uppdateras. Detta gör den ovärderlig för uppgifter som:

• Lagra tidigare värden från props eller state.
• Underhålla räknare eller timers.
• Spåra fokustillstånd utan att orsaka omrenderingar.
• Lagra alla muterbara värden som behöver bestå över renderingar.

Grundläggande användning: Åtkomst till DOM-element

Det mest kända användningsfallet är att komma åt DOM-element direkt. Detta är användbart för scenarier där du behöver interagera imperativt med en DOM-nod, som att fokusera ett inmatningsfält, mäta dess dimensioner eller utlösa animationer.

Exempel: Fokusera ett inmatningsfält

Här är hur du kan använda useRef för att fokusera ett inmatningsfält när en komponent monteras:

            import React, { useRef, useEffect } from 'react';

function MyComponent() {
  const inputRef = useRef(null);

  useEffect(() => {
    // Fokusera inmatningsfältet vid montering
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }, []); // Tom beroendearray säkerställer att detta körs endast en gång vid montering

  return (
    <input type="text" ref={inputRef} placeholder="Skriv in text" />
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

Förklaring:

1. Vi skapar en ref med useRef(null). Initialvärdet är null eftersom inmatningselementet inte existerar än när komponenten renderas första gången.
2. Vi kopplar ref:en till inmatningselementet med ref-propen: ref={inputRef}. React kommer automatiskt att sätta inputRef.current till DOM-noden när inmatningselementet monteras.
3. Vi använder useEffect med en tom beroendearray ([]) för att säkerställa att effekten körs endast en gång efter att komponenten har monterats.
4. Inuti effekten kontrollerar vi om inputRef.current existerar (för att undvika fel om elementet inte är tillgängligt än) och anropar sedan inputRef.current.focus() för att fokusera inmatningsfältet.

Bortom DOM-åtkomst: Hantera muterbara värden

Den verkliga kraften hos useRef ligger i dess förmåga att lagra muterbara värden som består över renderingar utan att utlösa omrenderingar. Detta öppnar upp ett brett spektrum av möjligheter för att optimera komponentbeteende och hantera tillstånd i funktionella komponenter.

Exempel: Lagra tidigare värden från props eller state

Ibland behöver du komma åt det tidigare värdet av en prop eller en state-variabel. useRef erbjuder ett rent sätt att göra detta utan att utlösa onödiga omrenderingar.

            import React, { useRef, useEffect } from 'react';

function MyComponent({ value }) {
  const previousValue = useRef(value);

  useEffect(() => {
    // Uppdatera ref:ens .current-egenskap med det nuvarande värdet
    previousValue.current = value;
  }, [value]); // Effekten körs när 'value'-propen ändras

  // Nu kan du komma åt det tidigare värdet med previousValue.current
  return (
    <div>
      Nuvarande värde: {value}
      <br />
      Föregående värde: {previousValue.current}
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

Förklaring:

1. Vi initierar ref:en previousValue med det initiala värdet från value-propen.
2. Vi använder useEffect för att uppdatera previousValue.current-egenskapen närhelst value-propen ändras.
3. Inuti komponenten kan vi nu komma åt det tidigare värdet av value-propen med hjälp av previousValue.current.

Användningsfallsexempel: Spåra ändringar i API-svar (Internationellt scenario)

Föreställ dig att du bygger en instrumentpanel som visar växelkurser hämtade från ett API. API:et kan returnera kurserna i olika format eller med varierande precision beroende på datakällan (t.ex. ett API från Europeiska centralbanken jämfört med ett API från en sydostasiatisk finansiell institution). Du kan använda useRef för att spåra den tidigare växelkursen och visa en visuell indikator (t.ex. en grön pil upp eller en röd pil ner) för att visa om kursen har ökat eller minskat sedan den senaste uppdateringen. Detta är avgörande för internationella användare som förlitar sig på dessa kurser för finansiella beslut.

Exempel: Underhålla räknare eller timers

useRef är perfekt för att hantera räknare eller timers som inte behöver utlösa omrenderingar. Du kan till exempel använda den för att spåra antalet gånger en knapp har klickats eller för att implementera en enkel timer.

            import React, { useRef, useState, useEffect } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);
  const clickCount = useRef(0); // Initiera ref:en med 0

  const handleClick = () => {
    clickCount.current++; // Öka ref:ens .current-egenskap
    setCount(clickCount.current); //Öka state vilket orsakar omrendering.
  };

  return (
    <div>
      <p>Knappen klickad: {count} gånger</p>
      <button onClick={handleClick}>Klicka här</button>
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

Förklaring:

1. Vi initierar en ref clickCount med värdet 0.
2. I handleClick-funktionen ökar vi clickCount.current-egenskapen. Detta utlöser inte en omrendering.
3. Vi uppdaterar även state-variabeln 'count' vilket utlöser en omrendering.

Exempel: Implementera en Debounce-funktion

Debouncing är en teknik som används för att begränsa hur ofta en funktion exekveras. Den används ofta i sökfält för att förhindra överdrivna API-anrop medan användaren skriver. useRef kan användas för att lagra det timer-ID som används i debounce-funktionen.

            import React, { useState, useRef, useEffect } from 'react';

function MyComponent() {
  const [searchTerm, setSearchTerm] = useState('');
  const [results, setResults] = useState([]);
  const timerRef = useRef(null); // Spara timer-ID:t

  const handleChange = (event) => {
    const newSearchTerm = event.target.value;
    setSearchTerm(newSearchTerm);

    // Rensa den föregående timern om den finns
    if (timerRef.current) {
      clearTimeout(timerRef.current);
    }

    // Sätt en ny timer
    timerRef.current = setTimeout(() => {
      // Simulera ett API-anrop
      fetch(`https://api.example.com/search?q=${newSearchTerm}`)
        .then(response => response.json())
        .then(data => setResults(data.results));
    }, 300); // Debounce i 300 millisekunder
  };

  return (
    <div>
      <input
        type="text"
        placeholder="Sök..."
        value={searchTerm}
        onChange={handleChange}
      />
      <ul>
        {results.map(result => (
          <li key={result.id}>{result.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

Förklaring:

1. Vi använder useRef för att lagra timer-ID:t i timerRef.
2. I handleChange-funktionen rensar vi den föregående timern (om den finns) med clearTimeout(timerRef.current).
3. Vi sätter sedan en ny timer med setTimeout och lagrar timer-ID:t i timerRef.current.
4. API-anropet görs endast efter att användaren har slutat skriva i 300 millisekunder.

Hänsyn till internationalisering: När du implementerar debouncing med API-anrop som involverar visning av information på olika språk, se till att ditt API stöder internationalisering och returnerar data på användarens föredragna språk. Överväg att använda Accept-Language-headern i dina API-förfrågningar.

Exempel: Spåra fokustillstånd utan omrenderingar

Du kan använda useRef för att spåra om ett element har fokus utan att orsaka omrenderingar. Detta kan vara användbart för att styla element baserat på deras fokustillstånd eller för att implementera anpassad logik för fokushantering.

            import React, { useRef, useState } from 'react';

function MyComponent() {
  const [isFocused, setIsFocused] = useState(false);
  const inputRef = useRef(null);

  const handleFocus = () => {
    setIsFocused(true);
  };

  const handleBlur = () => {
    setIsFocused(false);
  };

  return (
    <div>
      <input
        type="text"
        ref={inputRef}
        onFocus={handleFocus}
        onBlur={handleBlur}
      />
      <p>Fältet är fokuserat: {isFocused ? 'Ja' : 'Nej'}</p>
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

useRef vs. useState: Välja rätt verktyg

Det är viktigt att förstå de viktigaste skillnaderna mellan useRef och useState för att kunna välja rätt verktyg för uppgiften.

Bästa praxis och vanliga fallgropar

• Mutera inte state direkt: Även om useRef låter dig mutera värden direkt, undvik att direkt mutera state-variabler som hanteras av useState. Använd alltid setter-funktionen från useState för att uppdatera state.
• Var medveten om sidoeffekter: När du använder useRef för att hantera värden som påverkar UI:t, var medveten om potentiella sidoeffekter. Se till att din kod beter sig förutsägbart och inte introducerar oväntade buggar.
• Förlita dig inte på useRef för renderingslogik: Eftersom ändringar i useRef inte utlöser omrenderingar, förlita dig inte på dess värden direkt för att bestämma vad som ska renderas. Använd useState för värden som behöver styra renderingslogiken.
• Tänk på prestandakonsekvenser: Även om useRef kan hjälpa till att optimera prestanda genom att förhindra onödiga omrenderingar, var medveten om att överdriven användning av muterbara värden kan göra din kod svårare att förstå och felsöka.

Avancerade användningsfall och mönster

Bevara värden över komponentinstanser

Medan `useRef` bevarar värden över renderingar av en *enda* komponentinstans, behöver du ibland ett värde som består över *olika* instanser av samma komponent. Detta kräver ett något annorlunda tillvägagångssätt, ofta genom att utnyttja en variabel på modulnivå i kombination med `useRef`.

            // myComponent.js
let globalCounter = 0; // Variabel på modulnivå

import React, { useRef, useEffect } from 'react';

function MyComponent() {
  const counterRef = useRef(globalCounter); // Initiera med det globala värdet

  useEffect(() => {
    // Uppdatera den globala räknaren när ref:en ändras
    globalCounter = counterRef.current;
  }, [counterRef.current]);

  const increment = () => {
    counterRef.current++;
    //Ingen setState behövs, så ingen omrendering
  };

  return (
    <div>
      <p>Räknare: {counterRef.current}</p>
      <button onClick={increment}>Öka</button>
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

Viktiga överväganden: Detta mönster introducerar en global variabel, så var extremt försiktig med potentiella sidoeffekter och race conditions, särskilt i komplexa applikationer. Överväg alternativa tillvägagångssätt som att använda en context provider om värdet behöver delas mellan flera komponenter på ett mer kontrollerat sätt.

Slutsats: Släpp lös kraften i useRef

useRef är ett mångsidigt verktyg i React som sträcker sig långt bortom att bara komma åt DOM-element. Genom att förstå dess förmåga att lagra muterbara värden utan att utlösa omrenderingar kan du optimera dina komponenter, hantera state mer effektivt och bygga mer högpresterande och underhållbara React-applikationer. Kom ihåg att använda det omdömesgillt och alltid överväga de potentiella avvägningarna mellan prestanda och kodens tydlighet.

Genom att bemästra mönstren som beskrivs i den här guiden kommer du att vara väl rustad att utnyttja den fulla potentialen hos useRef i dina React-projekt, oavsett om du bygger en enkel webbapplikation eller ett komplext företagssystem. Kom ihåg att ta hänsyn till internationalisering och tillgänglighet när du bygger för en global publik!